<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1 :id="id | format">{{ name | capitalize }}</h1>
    <input type="text" v-model="name" />
    <button @click="handleDestroy">销毁App 组件</button>
    <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>
    <button @click="componentId = 'HelloWorld'">切换动态组件</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import LifeCycle from "@/components/LifeCycle.vue";

export default {
  name: "App",
  errorCaptured: function (error, vm, info) {
    console.log(error, vm, info);
    return false;
  },
  // 8个常见生命周期
  beforeCreate() {
    console.log("App组件beforeCreate执行了");
    console.log("点击事件: ", this.handleClick);
    console.log("姓名数据: ", this.name);
    console.log("元素: ", this.$el);
  },
  created() {
    console.log("App组件create执行了");
    console.log("点击事件: ", this.handleClick);
    console.log("姓名数据: ", this.name);
    console.log("元素: ", this.$el);
    fetch("https://v2.alapi.cn/api/joke");
  },
  beforeMount() {
    console.log("App组件beforeMount执行了");
    console.log("点击事件: ", this.handleClick);
    console.log("姓名数据: ", this.name);
    console.log("元素: ", this.$el);
  },
  mounted() {
    console.log("App组件mounted执行了");
    console.log("点击事件: ", this.handleClick);
    console.log("姓名数据: ", this.name);
    console.log("元素: ", this.$el);
  },
  beforeUpdate() {
    console.log("App组件更新前");
  },
  updated() {
    console.log("App组件更新完毕");
  },
  beforeDestroy() {
    console.log("App组件销毁前");
  },
  destroyed() {
    console.log("App组件销毁了");
  },

  methods: {
    handleClick: function () {},
    handleDestroy: function () {
      this.$destroy();
    },
  },

  data: function () {
    return {
      componentId: "LifeCycle",
      name: "Ranger",
      id: 41,
    };
  },
  filters: {
    format: function (id) {
      return "id:" + id;
    },
  },
  // 局部过滤器
  // filters: {
  //   capitalize: function (value) {
  //       return 41
  //       if (!value) return ''
  //       value = value.toString()
  //       return value[0].toUpperCase() + value.slice(1)
  //   },
  // },
  components: {
    HelloWorld,
    LifeCycle,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
